<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import {createManual} from '@comp/hhd/design/relation/types';
import {getFieldConfigById} from '@/utils/FormDesignUtils';
import RelationSelectorSearchFormItem
  from '@comp/hhd/design/FormEngine/RelationWrapper/RelationSelectorModal/search/RelationSelectorSearchFormItem.vue';
import RelationSelectorSearchMoreButton
  from '@comp/hhd/design/FormEngine/RelationWrapper/RelationSelectorModal/search/RelationSelectorSearchMoreButton.vue';

export default {
  name: 'RelationSelectorSearchForm',
  model: createModelForVue('searchModel'),
  props: {
    searchModel: createProps(Object, () => undefined),
    formDefinition: createProps(Object, createFormDefinition),
    manual: createProps(Object, createManual),
  },
  render(h) {
    this.getSearchModel();
    return h('div', {class: 'relation-selector-search-form'}, this.renderSearchFieldItem());
  },
  data() {
    return {
      showFields: [],
    }
  },
  methods: {
    getSearchModel() {
      let res = this.searchModel || {};
      this.buildSearchModelFields(res);
      if (!this.searchModel) {
        this.change(res);
      }
      return res;
    },
    change(v) {
      this.$emit('change', v);
    },
    buildSearchModelFields(searchModel) {
      this.fieldSearchObjects.forEach(({fieldConfig}) => {
        this.$set(searchModel, fieldConfig.id, searchModel[fieldConfig.id]);
        if (fieldConfig.fieldTitle) {
          this.$set(searchModel, `${fieldConfig.id}_title`, searchModel[fieldConfig.id]);
        }
      });
    },
    getSearchFields() {
      let commonSearch = [], moreSearch = [];
      for (let i = 0; i < this.fieldSearchObjects.length; i++) {
        if (i < 3) {
          commonSearch.push(this.fieldSearchObjects[i]);
        } else {
          moreSearch.push(this.fieldSearchObjects[i]);
        }
      }
      return {commonSearch, moreSearch};
    },
    getRealFields() {
      let {commonSearch, moreSearch} = this.getSearchFields();
      moreSearch = moreSearch.filter(({fieldConfig}) => this.showFields.includes(fieldConfig.id));
      return [...commonSearch, ...moreSearch].map(item => item.fieldConfig);
    },
    renderSearchFieldItem() {
      let h = this.$createElement;
      let {commonSearch, moreSearch} = this.getSearchFields();
      if (!commonSearch || !commonSearch.length) return undefined;
      let res = [], list = [];
      commonSearch.forEach(searchConfig => {
        list.push(h(RelationSelectorSearchFormItem, {
          props: {searchConfig, searchModel: this.getSearchModel()}
        }));
      });
      if (moreSearch && moreSearch.length) {
        list.push(this.renderMoreButton(moreSearch));
      }
      res.push(h('div', {class: 'relation-selector-search-form-common'}, list));
      list = [];
      if (moreSearch && moreSearch.length) {
        moreSearch.forEach(searchConfig => {
          if (!this.showFields.includes(searchConfig.fieldConfig.id)) return
          list.push(h(RelationSelectorSearchFormItem, {
            props: {searchConfig, searchModel: this.searchModel}
          }));
        });
      }
      res.push(h('div', {class: 'relation-selector-search-form-more'}, list));
      return res;
    },
    renderMoreButton(moreSearch) {
      let h = this.$createElement;
      return h(RelationSelectorSearchMoreButton, {
        props: {
          moreSearch,
          showFields: this.showFields,
        },
        on: {
          change: v => this.showFields = v,
        }
      })
    },
  },
  computed: {
    fieldSearchObjects() {
      let fieldSearchObjects = [];
      this.fieldSearches.forEach(searchConfig => {
        let fieldConfig = getFieldConfigById(searchConfig.fieldId, this.formDefinition);
        if (fieldConfig) {
          fieldSearchObjects.push({fieldConfig, searchConfig});
        }
      });
      return fieldSearchObjects;
    },
    fieldSearches() {
      try {
        return this.manual.fieldSearches || [];
      } catch (e) {
      }
      return [];
    },
  }
};
</script>
<style>
.relation-selector-search-form-common {
  display: flex;
  flex-wrap: wrap;
}
.relation-selector-search-form-more {
  display: flex;
  flex-wrap: wrap;
}
.relation-selector-search-form {
  flex: 1;

}
</style>